<template>
  <div>
    <el-page-header @back="goBack" content="满减报名" style="color:#3198ff"></el-page-header>
    <div style="margin-top: 30px;">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <span class="title" style="width:100px">商品一级分类</span>
            <el-select
              v-model="param.data.cid1"
              style="width:80%"
              placeholder="请选择"
              @change="fristGoodClick"
            >
              <el-option
                v-for="item in productOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <span class="title" style="width:100px">商品二级分类</span>
            <el-select v-model="param.data.id" style="width:80%" placeholder="请选择">
              <el-option
                v-for="item in productOptions1"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <span class="title">商品名称</span>
            <el-input placeholder="请输入名称" v-model="param.data.title"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item button-container">
            <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 50px;">
      <el-table
        ref="multipleTable"
        border
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-key="getRowKey"
        :header-cell-class-name="cellclass"
      >
        <el-table-column prop="title" label="商品名称"></el-table-column>
        <el-table-column prop="skuCount" label="子类目数量"></el-table-column>
        <el-table-column prop="stock" label="库存"></el-table-column>
        <el-table-column type="selection" width="100" :reserve-selection="true" align="center"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="currentPageChange"
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="form-item">
          <div class="fullcs">
            <span class="title">
              <span style="color:#F56C6C">*</span>满
            </span>
            <el-input-number
              placeholder="请输入"
              v-model="fullReduction.full"
              :min="0"
              :max="1000000000"
              :precision="0"
              :step="1"
              controls-position="right"
            ></el-input-number>
          </div>
          <div class="fullcs">
            <span class="title" style>减</span>
            <el-input-number
              placeholder="请输入"
              v-model="fullReduction.reduction"
              :min="0"
              :max="1000000000"
              :precision="0"
              :step="1"
              controls-position="right"
            ></el-input-number>
          </div>
        </div>
      </el-col>
    </el-row>
    <div style="text-align:center; margin-top: 50px;">
      <el-button type="primary" @click="submitForm()">提交</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      productOptions: [],
      productOptions1: [],
      param: {
        data: {
          title: "", // 商品名称
          cid1: "", //类型
          id: "" //类型2
        },
        queryRequest: {
          pageNum: 1,
          pageSize: 10
        }
      },
      fullReduction: {
        full: "",
        reduction: ""
      },
      tableData: [],
      total: 1,
      multipleSelection: [],
      type: "",
      tid: "",
      activityname:"",
      startTime:"",
      endTime:""
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {
    this.type = this.$route.query.type;
    this.tid = this.$route.query.id;
    this.activityname =this.$route.query.name;
    this.startTime =this.$route.query.st;
    this.endTime =this.$route.query.bt;
    this.goodFirst();
    this.getGoods();
  },
  methods: {
    submitForm() {
      var param = {};
      param.type = this.type;
      param.activityId = this.tid;
      param.activityName = this.activityname;
      param.startTime = this.startTime;
      param.endTime = this.endTime;
      if (this.fullReduction.full == "") {
        this.$message({
          message: "请填写满减金额",
          type: "warning"
        });
        return;
      } else {
        param.satisfyMoney = this.fullReduction.full;
      }
      if (this.fullReduction.reduction == "") {
        this.$message({
          message: "请填写满减金额",
          type: "warning"
        });
        return;
      } else {
        param.reduceMoney = this.fullReduction.reduction;
      }

      if (this.fullReduction.full <= this.fullReduction.reduction) {
        this.$message({
          message: "满的金额应必须大于减的金额",
          type: "warning"
        });
        return;
      }
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择商品",
          type: "warning"
        });
        return;
      }
      param.coalitionactivitySpuList = this.multipleSelection;
      console.log(param);
      this.$service.insertCy(param).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.$router.back();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    getGoods() {
      this.$service.tbSpuSelectTNS(this.param).then(res => {
        if (res.code == "00000") {
          if (
            res.data.rows.length == 0 &&
            this.param.queryRequest.pageNum != 1
          ) {
            this.param.queryRequest.pageNum -= 1;
            this.getGoods();
          }
          this.tableData = (res.data && res.data.rows) || [];
          this.total = res.data.total || 0;
        }
      });
    },
    getRowKey(row) {
      return row.id;
    },
    goBack() {
      this.$router.back();
    },
    fristGoodClick(val) {
      this.param.data.id = "";
      this.goodSecond(val);
    },
    goodFirst() {
      this.$service.firstGood().then(res => {
        if (res.code == "00000") {
          this.productOptions = res.data || [];
        }
      });
    },
    goodSecond(cid) {
      this.$service.secondGood(cid).then(res => {
        if (res.code == "00000") {
          this.productOptions1 = res.data || [];
        }
      });
    },
    search() {
      this.param.queryRequest.pageNum = 1;
      this.getGoods();
    },
    resetSearchCotnet() {
      //重置搜索条件
      this.param.data.title = "";
      this.param.data.cid1 = "";
      this.param.data.id = "";
    },
    cellclass(row) {
      if (row.columnIndex === 3) {
        return "DisabledSelection";
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      for (let i = 0; i < val.length; i++) {
        const element = val[i];
        var dic = {
          spuId: element.id,
          spuName: element.title
        };
        this.multipleSelection.push(dic);
      }
    },
    currentPageChange(e) {
      this.param.queryRequest.pageNum = e;
      this.getGoods();
    }
  },
  watch: {}
};
</script>
<style scoped>
.fullcs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 10px;
}
.el-table /deep/.el-checkbox__inner {
  width: 20px;
  height: 20px;
}
.el-table /deep/.el-checkbox__inner::after {
  height: 10px;
  left: 6px;
}
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner {
  display: none;
  position: relative;
}
.el-table /deep/.DisabledSelection .cell:before {
  content: "选择";
  position: absolute;
  right: 40px;
}
</style>